<template>
  <div class="sanstyle" style="position: relative">
    <!--左边-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">{{ animalName }}各海拔采集照片/视频</span>
            <br />
            <span class="xwz"
              >Photos/videos of all altitudes are collected</span
            >
          </div>
        </div>
        <!--标题 E-->

        <!--调查次数B-->
        <div class="tccs">
          <div>
            <div>
              <span style="color: white; font-size: 0.18rem">照片数量</span>
            </div>
            <div>
              <span style="color: #2efff2; font-size: 0.36rem">{{
                photoFenLei.photo
              }}</span
              ><span style="color: white; font-size: 0.18rem">次</span>
            </div>
            <div><img src="/static/images/zhaopian.png" alt="" /></div>
          </div>
          <div>
            <div>
              <span style="color: white; font-size: 0.18rem">视频数量</span>
            </div>
            <div>
              <span style="color: #34ceff; font-size: 0.36rem">{{
                photoFenLei.video
              }}</span
              ><span style="color: white; font-size: 0.18rem">次</span>
            </div>
            <div><img src="/static/images/shipin.png" alt="" /></div>
          </div>
        </div>
        <!--调查次数E-->

        <div style="width: 100%; height: 100%; position: relative">
          <div
            id="bar1"
            style="
              position: absolute;
              left: -0.4rem;
              width: calc(100% + 0.4rem);
              height: calc(100% - 2.5rem);
            "
          ></div>
        </div>
      </div>
    </div>
    <!--左边-->
    <!--中间-->
    <div style="position: relative">
      <div class="bzxq">
        <div v-for="(item, index) in tclist" :key="index">
          <div><img :src="item.ico" alt="" /></div>
          <div>
            <span :style="{ color: item.color }">{{ item.num }}</span>
            <br />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <!--分布类型 B-->

      <div class="xjfb" @click="isshowxj" style="width: 1.6rem; left: 0.34rem">
        <div :style="isxj ? 'opacity: 1' : 'opacity: .6'">
          <img
            style="width: 0.15rem; height: 0.15rem"
            src="/static/images/huangdian.png"
            alt=""
          />
          <span>{{ kw }}相机分布</span>
        </div>
      </div>

      <div
        class="xjfb"
        style="width: 1.6rem; left: 2.1rem; padding-left: 0.1rem"
      >
        <div>
          <img
            style="width: 0.15rem; height: 0.15rem"
            src="/static/images/hongdian.png"
            alt=""
          />
          <el-select
            v-model="animalName"
            @change="dxwuzhong"
            placeholder="请选择"
          >
            <el-option
              v-for="item in wuzhong"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!--分布类型 E-->
      <!--tab切换 B-->
      <div class="qhtab" style="top: 1.6rem; left: 0.34rem">
        <div
          v-for="(item, index) in navList"
          :key="index"
          @click="datamap(item.type)"
        >
          <img
            :src="
              item.sts ? '/static/images/tab1.png' : '/static/images/tab2.png'
            "
            alt=""
          />
          <span style="margin-left: 0.08rem">{{ item.name }}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <!--中间地图 B-->
      <div id="map" style="height: 75%; width: 100%; margin-top: 15%"></div>
      <!--中间地图 E-->
      <div class="shijianzhoubox">
        <div style="width: 100%; height: 100%; overflow: hidden" id="sjc"></div>
      </div>
    </div>
    <!--中间=-->
    <!--右边D-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">{{ animalName }}各时间采集照片/视频</span>
            <br />
            <span class="xwz">Collect photos/videos at all times</span>
          </div>
        </div>
        <!--标题 E-->

        <div class="glsj">
          <div>
            <div class="llbt">
              <span class="dwz" style="line-height: 0">各时拍摄照片/视频</span>
              <br />
              <span class="xwz" style="line-height: 0"
                >Take photos/videos at different times</span
              >
            </div>
            <div
              style="height: calc(100% - 0.6rem); width: 100%"
              id="bar2"
            ></div>
          </div>
          <div>
            <div class="llbt">
              <span class="dwz" style="line-height: 0"
                >平均每月拍摄照片/视频数</span
              >
              <br />
              <span class="xwz" style="line-height: 0"
                >Average number of photos/videos taken per month</span
              >
            </div>
            <div
              style="height: calc(100% - 0.6rem); width: 100%"
              id="bar3"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <!--右边D-->

    <div class="zhezhao" v-if="isShow">
      <div>
        <div class="closei">
          <img
            style="width: 100%; height: 100%"
            @click="clearLove"
            src="/static/images/guanbi.png"
            alt=""
          />
        </div>
        <div class="xuanzhuan" v-if="isMp4(lovePhoto) == '照片'">
          <img
            style="width: 100%; height: 100%"
            @click="xuanzhaun"
            src="/static/images/xuanzhuan.png"
            alt=""
          />
        </div>

        <!--图片 B-->
        <div class="imgBox" id="imgBox">
          <img
            id="pcr"
            :src="lovePhoto"
            v-if="isMp4(lovePhoto) == '照片'"
            alt=""
          />
          <video
            style="max-width: 100%; max-height: 100%"
            :src="lovePhoto"
            v-if="isMp4(lovePhoto) == '视频'"
            controls="controls"
          ></video>
        </div>
        <!--图片 E-->

        <!--轮播图 B-->
        <div class="lbxtimg">
          <!--左边B-->
          <div class="jianmotua">
            <img @click="lmv" src="/static/images/leftjiantou.png" alt="" />
          </div>
          <!--左边E-->

          <!--l轮播图容器 B-->
          <div class="lbtbox">
            <ul
              class="clearfix"
              id="imgul"
              :style="{ width: 2.3 * imglist.length + 'rem' }"
            >
              <li
                v-for="(item, index) in imglist"
                :key="index"
                :style="
                  item.fill ? 'border: 2px solid #2EFFF2;' : 'border:none'
                "
                @click="xbdimg(item)"
              >
                <img
                  :src="iscloud(item.url)"
                  v-if="isMp4(item.url) == '照片'"
                  alt=""
                />
                <img
                  src="/static/images/video.jpg"
                  v-if="isMp4(item.url) == '视频'"
                  alt=""
                />
              </li>
            </ul>
          </div>
          <!--l轮播图容器 E-->

          <!--右边B-->
          <div class="jianmotua" @click="rmv">
            <img src="/static/images/rightjainotu.png" alt="" />
          </div>
          <!--右边E-->
        </div>
        <!--轮播图 E-->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";

export default {
  name: "hwxj",
  data() {
    return {
      aike: "",
      wuzhong: [],
      animalName: "",
      photoFenLei: {
        photo: 0,
        video: 0,
      },
      kw: "全部",
      fbList: [
        {
          name: "相机分布",
          ico: "/static/images/huangdian.png",
          sts: true,
        },
        {
          name: "活动范围",
          ico: "/static/images/hongdian.png",
          sts: true,
        },
      ],
      tclist: [
        {
          ico: "/static/images/hw1.png",
          name: "布设人员(人)",
          num: 642,
          color: "#2EFFF2",
        },
        {
          ico: "/static/images/hw2.png",
          name: "布设次数(次)",
          num: 385,
          color: "#FFF27F",
        },
        {
          ico: "/static/images/hw3.png",
          name: "布设相机(台)",
          num: 836,
          color: "#917FFF",
        },
        {
          ico: "/static/images/hw4.png",
          name: "拍摄数据(条)",
          num: 170,
          color: "#34CEFF",
        },
      ],
      areaId: "",
      fb: [],
      fenbu: [],
      fw: [],
      fanwei: [],
      navList: [
        {
          name: "功能区划",
          type: "gnqh",
          sts: true,
        },
        {
          name: "网格",
          type: "wg",
          sts: false,
        },
      ],
      maptype: "gnqh",
      imglist: [],
      idx: 0,
      xz: 0,
      isShow: false,
      lovePhoto: "",
      isxj: true,
      bhqName: [],
      MapColor: [
        "rgba(203, 255, 252, 0.8)",
        "rgba(74, 239, 230, 0.8)",
        "rgba(4, 178, 169, 0.8)",
        "rgba(203, 255, 252, 0.8)",
        "rgba(114,8,82,.8)",
        "rgba(174,213,13,.8)",
        "rgba(194,133,112,.8)",
        "rgba(225,66,19,.8)",
        "rgba(94,60,190,.8)",
        "rgba(253,166,199,.8)",
      ],
    };
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
    this.getlcc();
  },
  mounted() {
    this.getcyv();
    let vm = this;
    (async function f() {
      let res = await http.get("/papi/0000085_json/gnqh.json");
      let arr = [];
      res.data.features.forEach((t) => {
        arr.push(t.properties.name);
      });
      vm.bhqName = arr;
      vm.getwuzhong();
    })();
    const _that = this;
    window.onresize = () => {
      return (() => {
        let maxWidth = $("#imgBox").width();
        let maxHeight = $("#imgBox").height();
        let path = $("#pcr").attr("src");
        _that.AutoSize(path, maxWidth, maxHeight);
      })();
    };
  },
  methods: {
    isshowxj() {
      this.isxj = !this.isxj;
      let url = "",
        geo = {},
        jsondata = [],
        e = ["实验区", "缓冲区", "核心区"];
      if (this.maptype == "gnqh") {
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            itemStyle: {
              show: true,
              areaColor: this.MapColor[x],
              borderColor: this.MapColor[x],
              borderWidth: "1",
            },
          });
        });
        geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        url = "/papi/0000085_json/gnqh.json";
      }
      if (this.maptype == "wg") {
        geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        url = "/papi/0000085_json/wangge.json";
      }
      if (this.isxj) {
        this.fw = this.fanwei;
      } else {
        this.fw = [];
      }
      this.map(url, geo, this.fb, this.fw);
    },
    clearLove() {
      this.idx = 0;
      this.xz = 0;
      this.isShow = false;
    },
    xuanzhaun() {
      this.xz++;
      $("#pcr").css({ transform: "rotate(" + this.xz * 90 + "deg)" });
    },
    xbdimg(data) {
      this.imglist.forEach((e) => {
        if (e.url == data.url) {
          e.fill = true;
        } else {
          e.fill = false;
        }
      });
      this.lovePhoto = data.url;
      this.xz = 0;
      $("#pcr").css({ transform: "rotate(0deg)" });
      let vm = this;
      setTimeout(function () {
        let maxWidth = $("#imgBox").width();
        let maxHeight = $("#imgBox").height();
        let path = $("#pcr").attr("src");
        vm.AutoSize(path, maxWidth, maxHeight);
      }, 500);
    },
    lmv() {
      let target = $("#imgul"),
        vm = this;
      if (this.idx < this.imglist.length - 4) {
        vm.idx++;
        target.stop().animate({ left: -vm.idx * 2.3 + 0.4 + "rem" }, 500);
      }
    },
    rmv() {
      let target = $("#imgul"),
        vm = this;
      if (this.idx > 0) {
        vm.idx--;
        target.stop().animate({ left: -vm.idx * 2.3 + "rem" }, 500);
      }
    },
    AutoSize(Img, maxWidth, maxHeight) {
      let image = new Image();
      image.src = Img;
      image.onload = function () {
        if (image.width < maxWidth && image.height < maxHeight) {
          $("#pcr").css({ width: image.width, height: image.height });
        } else {
          if (maxWidth / maxHeight <= image.width / image.height) {
            $("#pcr").animate(
              {
                width: maxWidth,
                height: maxWidth * (image.height / image.width),
              },
              "fast"
            );
          } else {
            $("#pcr").animate(
              {
                width: maxHeight * (image.width / image.height),
                height: maxHeight,
              },
              "fast"
            );
          }
        }
      };
    },
    isMp4(m) {
      let iv = m.split(".");
      if (iv[iv.length - 1].toLowerCase() == "mp4") {
        return "视频";
      } else {
        return "照片";
      }
    },
    iscloud(p) {
      if (p.split(":")[0] == "http") {
        return p + "@oosImage|150h";
      }
      if (p.split(":")[0] == "https") {
        return p + "?x-amz-process=image/resize,h_150,m_lfit";
      }
    },
    getcyv() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.cameraYearView + vm.areaId);
        if (res.data.code == "200") {
          let x = [],
            y = [];
          res.data.data.forEach((t) => {
            x.push(t.year);
            y.push(t.number);
          });
          vm.sjc(x, y);
        }
      })();
    },
    //延庆区颜色
    yqColor(n) {
      if (n == "实验区") {
        return "rgba(203, 255, 252, 0.8)";
      }
      if (n == "核心区") {
        return "rgba(4, 178, 169, 0.8)";
      }
      if (n == "缓冲区") {
        return "rgba(74, 239, 230, 0.8)";
      }
    },
    datamap(flag) {
      if (this.isxj) {
        this.fw = this.fanwei;
      } else {
        this.fw = [];
      }
      this.navList.forEach((e) => {
        if (flag == e.type) {
          e.sts = true;
        } else {
          e.sts = false;
        }
      });
      if (flag == "gnqh") {
        let url = "/papi/0000085_json/gnqh.json";
        let jsondata = [];
        let e = ["实验区", "缓冲区", "核心区"];
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            // itemStyle: {
            //   show: true,
            //   areaColor: this.MapColor[x],
            //   borderColor: this.MapColor[x],
            //   borderWidth: "1",
            // },

            //延庆版本
            itemStyle: {
              show: true,
              areaColor: this.yqColor(c),
              borderColor: this.yqColor(c),
              borderWidth: "1",
            },
          });
        });
        let geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        this.map(url, geo, this.fb, this.fw);
      }
      if (flag == "wg") {
        let geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        let url = "/papi/0000085_json/wangge.json";
        this.map(url, geo, this.fb, this.fw);
      }
    },
    map(url, geo, fenbu, fanwei) {
      let vm = this;
      let myChart = echarts.getInstanceByDom(document.getElementById("map"));
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(document.getElementById("map"));
      } else {
        myChart.clear();
      }
      $.getJSON(url, function (geoJson) {
        echarts.registerMap("GeoJson", geoJson);
        myChart.showLoading("default", {
          text: "加载中，请稍候...",
          maskColor: "rgba(0,0,0,.3)",
          textColor: "#fff",
        });
        setTimeout(function () {
          let option = {
            geo: geo,
            series: [
              {
                name: "点位",
                type: "scatter",
                coordinateSystem: "geo",
                symbol: "pin",
                legendHoverLink: true,
                symbolSize: [30, 30],
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#fff",
                      fontSize: 9,
                    },
                    formatter(value) {
                      return value.data.sum;
                    },
                  },
                },
                data: fenbu,
                itemStyle: {
                  normal: {
                    color: "#FE4141", //标志颜色
                  },
                },
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke",
                },
                hoverAnimation: true,
                zlevel: 2,
              },
              {
                name: "分布",
                type: "scatter",
                coordinateSystem: "geo",
                symbol: "circle",
                symbolSize: [10, 10],
                data: fanwei,
                itemStyle: {
                  normal: {
                    color: "#FFF500", //标志颜色
                  },
                },
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke",
                },
                hoverAnimation: true,
                zlevel: 1,
              },
            ],
          };
          myChart.hideLoading();
          myChart.setOption(option, true);
          myChart.resize();
        }, 1000);

        ///3、在渲染点击事件之前先清除点击事件
        myChart.off("click");
        myChart.on("click", function (params) {
          if (params.componentSubType == "scatter") {
            if (params.seriesName == "点位") {
              vm.opendwimg(params);
            }
          }
        });

        window.addEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    filteryType(e) {
      if (e == "实验区") {
        return "rgba(203, 255, 252, 0.8)";
      }
      if (e == "缓冲区") {
        return "rgba(74, 239, 230, 0.8)";
      }
      if (e == "核心区") {
        return "rgba(4, 178, 169, 0.8)";
      }
      return "rgba(203, 255, 252, 0.8)";
    },
    opendwimg(params) {
      let _that = this,
        arr = [];
      (async function f() {
        let res = await http.get(
          api.getMedias +
            _that.areaId +
            "&name=" +
            _that.animalName +
            "&lon=" +
            params.data.value[0] +
            "&lat=" +
            params.data.value[1]
        );
        if (res.data.data.length > 0) {
          res.data.data.forEach((t) => {
            let z = {
              fill: false,
              url: t.accessorySrc,
            };
            arr.push(z);
          });
          arr[0].fill = true;
          _that.lovePhoto = arr[0].url;
          _that.imglist = arr;
          setTimeout(function () {
            _that.isShow = true;
            setTimeout(function () {
              let maxWidth = $("#imgBox").width();
              let maxHeight = $("#imgBox").height();
              let path = $("#pcr").attr("src");
              _that.AutoSize(path, maxWidth, maxHeight);
            }, 500);
          }, 500);
        } else {
          _that.$message({
            message: "该点位暂无图像资料,请尽快补充",
            type: "warning",
          });
        }
      })();
    },
    getlcc() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.layCameraEnvirCount + vm.areaId);
        vm.tclist[0].num = res.data.layRenyuan;
        vm.tclist[1].num = res.data.layNum;
        vm.tclist[2].num = res.data.layingCamera;
        vm.tclist[3].num = res.data.dataNum;
      })();
    },
    getwuzhong() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.totalCount + vm.areaId);
        let arr = [];
        res.data.wuzhong.forEach((e) => {
          let z = {
            value: e,
            label: e,
          };
          arr.push(z);
        });
        vm.wuzhong = arr;
        vm.animalName = res.data.wuzhong[0];
        vm.getCount(vm.aike);
      })();
    },
    dxwuzhong() {
      let vm = this;
      (async function f() {
        let res = await http.get(
          api.animalCount +
            vm.areaId +
            "&timeStr=" +
            vm.aike +
            "&animalName=" +
            vm.animalName
        );
        vm.photoFenLei.photo = res.data.photoFenLei.photo;
        vm.photoFenLei.video = res.data.photoFenLei.video;
        let hx = [],
          hy = [];
        for (let key in res.data.haibaCount) {
          hx.push(key);
          hy.push(res.data.haibaCount[key]);
        }
        vm.drawbar1(hx, hy);
        let sx = [],
          sy = [];
        for (let key in res.data.dayShootTimeCount) {
          sx.push(key);
          sy.push(res.data.dayShootTimeCount[key]);
        }
        vm.drawbar2(sx, sy);
        let mx = [],
          my = [];
        for (let key in res.data.monthShootTimCount) {
          mx.push(key);
          my.push(res.data.monthShootTimCount[key]);
        }
        vm.drawbar3(mx, my);
        let arr = [];
        res.data.fenbu.forEach((e, index) => {
          // if (index < 100) {
          let z = { value: [e[0], e[1]], sum: e[2] };
          arr.push(z);
          // }
        });
        vm.fb = arr;
        vm.datamap(vm.maptype);
      })();
    },
    getCount(time) {
      let vm = this;
      (async function f() {
        let res = await http.get(
          api.animalCount +
            vm.areaId +
            "&timeStr=" +
            time +
            "&animalName=" +
            vm.animalName
        );
        vm.photoFenLei.photo = res.data.photoFenLei.photo;
        vm.photoFenLei.video = res.data.photoFenLei.video;
        let hx = [],
          hy = [];
        for (let key in res.data.haibaCount) {
          hx.push(key);
          hy.push(res.data.haibaCount[key]);
        }
        vm.drawbar1(hx, hy);
        let sx = [],
          sy = [];
        for (let key in res.data.dayShootTimeCount) {
          sx.push(key);
          sy.push(res.data.dayShootTimeCount[key]);
        }
        vm.drawbar2(sx, sy);
        let mx = [],
          my = [];
        for (let key in res.data.monthShootTimCount) {
          mx.push(key);
          my.push(res.data.monthShootTimCount[key]);
        }
        vm.drawbar3(mx, my);
        let arr = [];
        res.data.fenbu.forEach((e, index) => {
          // if (index < 100) {
          let z = { value: [e[0], e[1]], sum: e[2] };
          arr.push(z);
          // }
        });
        vm.fb = arr;
        (async function f() {
          let res = await http.get(
            api.cameraLayFenbu + vm.areaId + "&timeStr=" + time
          );
          let arr = [];
          res.data.forEach((e, index) => {
            // if (index < 100) {
            let z = { value: [e[0], e[1]] };
            arr.push(z);
            // }
          });
          vm.fanwei = arr;
          vm.datamap(vm.maptype);
        })();
      })();
    },
    sjc(x, y) {
      let vm = this;
      let myChart = echarts.getInstanceByDom(document.getElementById("sjc"));
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(document.getElementById("sjc"));
      }
      let ins = null;
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          bottom: "25%",
          top: "12%",
          right: "2%",
          left: "2%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#2EFFF2",
            },
          },
          data: x,
          triggerEvent: true,
        },
        yAxis: {
          type: "value",
          show: false,
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "照片/视频",
            data: y,
            barWidth: 12,
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.dataIndex == ins) {
                    return "rgba(61, 39, 202, 1)";
                  } else {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#FF3465" },
                      { offset: 1, color: "#2EFFF2" },
                    ]);
                  }
                },
              },
            },
          },
        ],
      };
      myChart.clear();
      myChart.on("click", function (param) {
        if (param.componentType == "xAxis") {
          if (ins == param.dataIndex) {
            ins = null;
            vm.kw = "全部";
            vm.aike = "";
            vm.getCount(vm.aike);
          } else {
            ins = param.dataIndex;
            vm.kw = param.value + "年";
            vm.aike = param.value;
            vm.getCount(vm.aike);
          }
        }
        myChart.setOption({
          xAxis: [
            {
              axisLabel: {
                color: function (value, index) {
                  return index == ins ? "rgba(61, 39, 202, 1)" : "#2EFFF2";
                },
              },
            },
          ],
        });
        myChart.setOption(option);
      });

      myChart.setOption(option, true);
      setTimeout(function () {
        myChart.resize();
      }, 100);
    },
    qhfb(item) {
      item.sts = !item.sts;
      let url = "",
        geo = {},
        jsondata = [],
        e = ["实验区", "缓冲区", "核心区"];
      if (this.maptype == "gnqh") {
        this.bhqName.forEach((c, x) => {
          jsondata.push({
            name: c,
            value: 1,
            label: {
              show: false,
            },
            itemStyle: {
              show: true,
              areaColor: this.MapColor[x],
              borderColor: this.MapColor[x],
              borderWidth: "1",
            },
          });
        });
        geo = {
          type: "map",
          map: "GeoJson",
          regions: jsondata,
          zoom: 1.1,
          show: true,
          roam: true,
        };
        url = "/papi/0000085_json/gnqh.json";
      }
      if (this.maptype == "wg") {
        geo = {
          map: "GeoJson",
          show: true,
          roam: true,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(4, 178, 169, 0.8)",
              borderColor: "#4AEFE6",
              borderWidth: 1,
            },
            emphasis: {},
          },
        };
        url = "/papi/0000085_json/wangge.json";
      }
      if (item.sts) {
        if (item.name == "相机分布") {
          this.fb = this.fenbu;
        }
        if (item.name == "活动范围") {
          this.fw = this.fanwei;
        }
      } else {
        if (item.name == "相机分布") {
          this.fb = [];
        }
        if (item.name == "活动范围") {
          this.fw = [];
        }
      }
      this.map(url, geo, this.fb, this.fw);
    },
    drawbar1(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar1"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar1"));
      }
      let option = {
        yAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: x,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "5%",
          left: "20%",
          right: "5%",
          bottom: "5%",
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: true,
            label: {
              show: true,
              position: "right",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(81, 37, 255, 0)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 31, 152, 0.8)",
                  },
                ]),
              },
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255, 1)",
              opacity: 0.1,
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawbar2(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar2"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar2"));
      }
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#fff",
          },
          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "5%",
          left: "10%",
          bottom: "10%",
          right: "5%",
        },
        series: [
          {
            data: y,
            type: "line",
            lineStyle: {
              color: "rgba(255, 233, 36, 0.7)",
            },
            itemStyle: {
              color: "#FFF27F",
            },
            symbolSize: 10,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 233, 36, 0.7)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 242, 127, 0)",
                },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawbar3(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar3"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar3"));
      }
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          data: x,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },
        grid: {
          top: "13%",
          left: "10%",
          right: "1%",
          bottom: "22%",
        },
        series: [
          {
            data: y,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
            barWidth: 16,
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(145, 127, 255, 0)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(46, 12, 255, 0.8)",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
@import "../../static/css/jbxx.css";
@import "../../static/css/xxjc.css";
</style>
<style>
.xjfb .el-input__inner {
  border: none !important;
  background: transparent;
  color: white;
}

.el-select-dropdown {
  border: 1px solid rgba(46, 205, 255, 0.6);
  background: rgba(1, 15, 27, 0.7);
}

.el-select-dropdown__item.selected {
  color: #2efff2;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: white;
}

.el-select-dropdown__item {
  color: #34ceff;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: rgba(46, 255, 242, 0.1);
}

.el-icon-warning {
  font-size: 0.14rem !important;
}
</style>
